<template>
    <div class="edu-page-warp">
        <div class="edu-page-title">
            <el-button
                v-if="!isRead &&dataType ===2"
                class="float-right"
                @click="copyAllVisible = true"
            >复制全部</el-button>
            <span
                v-for="(item, index) in topNavItems"
                :class="{active: item.active}"
                :key="index"
                class="border-right"
                @click="clickItem(item)"
            >{{ item.label }}</span>
        </div>
        <div v-for="(item, index) in chapter.cultureSchemeDetailList" :key="index">
            <template v-if="!item.isOldContent || 3 != item.contentType">
                <div class="edu-opertion-bar" style="margin-top: 8px;">
                    <div v-show="topNavItems[0].active" class="float-left">
                        <span style="line-height: 32px;">{{ item.name }}</span>
                    </div>
                    <div v-show="topNavItems[1].active" class="float-left">
                        <span style="line-height: 32px;">{{ item.nameEn }}</span>
                    </div>
                    <div v-if="item.contentType == 1" class="float-right">
                        <el-button
                            v-if="!item.status && dataType == '2'"
                            type="text"
                            @click="handleCopyChapter(item)"
                        >复制之前</el-button>
                        <!-- <el-button
                            v-if="item.status"
                            type="text"
                            @click="handleSaveChapter(item)"
                        >保存</el-button>-->
                        <el-button
                            v-if="!item.status&& !isRead"
                            type="text"
                            @click="handleEditChapter(item)"
                        >编辑</el-button>
                    </div>
                    <div v-if="item.contentType == 2" class="float-right">
                        <el-button
                            type="text"
                            @click="relateTable(item)"
                        >{{ $t('culture.relationalSysTable') }}</el-button>
                    </div>
                </div>

                <Tinymce
                    v-if="item.status && item.contentType == 1 && topNavItems[0].active"
                    ref="editor"
                    :height="200"
                    v-model="item.content"
                    :simple="true"
                    @editor-blur="handleSaveChapter(item)"
                />
                <Tinymce
                    v-if="item.status && item.contentType == 1 && topNavItems[1].active"
                    ref="editor"
                    :height="200"
                    :simple="true"
                    v-model="item.contentEn"
                    @editor-blur="handleSaveChapter(item)"
                />
                <div
                    v-show="!item.status && item.contentType == 1 && topNavItems[0].active"
                    class="conent-style"
                    v-html="item.content"
                ></div>
                <div
                    v-show="!item.status && item.contentType == 1 && topNavItems[1].active"
                    class="conent-style"
                    v-html="item.contentEn"
                ></div>
            </template>
        </div>
        <el-row class="pd-12px float-right" style="padding-right: 0;">
            <el-col :span="24">
                <el-button size="medium" @click="backStep">{{ $t('common.btn.prev') }}</el-button>
                <el-button size="medium" @click="preview">{{ $t('common.btn.preview') }}</el-button>
                <el-button
                    v-if="dataType == '2'  && !isRead"
                    size="medium"
                    type="primary"
                    @click="submitCheck"
                >{{ $t('common.btn.submit') }}</el-button>
            </el-col>
        </el-row>
        <el-dialog
            :visible.sync="copyAllVisible"
            title="复制全部"
            width="45%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="copyForm"
                :model="copyForm"
                label-width="80px"
                label-position="left"
                class="pd-20px"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年级:" prop="year">
                            <el-date-picker
                                v-model="copyAllForm.year"
                                value-format="yyyy"
                                type="year"
                                placeholder="选择学年"
                                style="width: 100%"
                                @change="handleChangYearAll"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.trainingLevel') + ':'">
                            <el-select v-model="copyAllForm.trainingLevel" style="width: 100%"
                            clearable @change="handleChangYearAll">
                                <el-option
                                    v-for="item in copyAllOptions.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.trainingCategory') + ':'">
                            <el-select
                                v-model="copyAllForm.trainingCategory"
                                style="width: 100%"
                                clearable @change="handleChangYearAll"
                                multiple collapse-tags>
                                <el-option
                                    v-for="item in copyAllOptions.trainingCategory"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.degreeType') + ':'">
                            <el-select v-model="copyAllForm.degreeType" style="width: 100%;"
                            clearable @change="handleChangYearAll">
                                <el-option
                                    v-for="item in copyAllOptions.degreeType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.formLearning') + ':'">
                            <el-select
                                v-model="copyAllForm.formLearning"
                                style="width: 100%"
                                clearable @change="handleInitScheme">
                                <el-option
                                    v-for="item in copyAllOptions.formLearning"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="培养方案:" prop="schemeId">
                            <el-select
                                v-model="copyAllForm.schemeId"
                                style="width: 100%"
                                @change="handleChangAllScheme"
                            >
                                <el-option
                                    v-for="item in copyAllOptions.schemes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer">
                <div>
                    <el-button @click="copyAllVisible = false">{{ $t('message.cancel') }}</el-button>
                    <el-button
                        type="primary"
                        @click="handleSubmitAllCopy"
                    >{{ $t('message.confirm') }}</el-button>
                </div>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :title="$t('culture.relationalTable')"
            width="60%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="relateTableForm"
                :model="relateTableForm"
                label-position="left"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-form-item :label="$t('culture.beforContent') + ':'" prop="contentBefore">
                    <Tinymce
                        v-if="!focusIndex"
                        ref="editor"
                        :height="100"
                        v-model="relateTableForm.contentBefore"
                        :simple="true"
                    />
                    <Tinymce
                        v-else
                        ref="editor"
                        :height="100"
                        v-model="relateTableForm.contentBeforeEn"
                        :simple="true"
                    />
                </el-form-item>
                <el-form-item :label="$t('culture.relationalTable') + ':'" prop="table">
                    <el-radio-group v-model="relateTableForm.table" style="margin-bottom: 16px;">
                        <el-radio-button :label="1">{{ $t('culture.creditTable') }}</el-radio-button>
                        <el-radio-button :label="2">{{ $t('culture.settingTable') }}</el-radio-button>
                    </el-radio-group>
                    <courseCategoryFormForGraduate
                        v-if="relateTableForm.table==1"
                        :template-id="id"
                        :data-type="dataType"
                        :is-read="true"
                    />
                    <courseFormForGraduate
                        v-if="relateTableForm.table==2"
                        :template-id="id"
                        :data-type="dataType"
                        :is-read="true"
                    />
                </el-form-item>
                <el-form-item :label="$t('culture.afterContent') + ':'" prop="contentAfter">
                    <Tinymce
                        v-if="!focusIndex"
                        ref="editor"
                        :height="100"
                        v-model="relateTableForm.contentAfter"
                        :simple="true"
                    />
                    <Tinymce
                        v-else
                        ref="editor"
                        :height="100"
                        v-model="relateTableForm.contentAfterEn"
                        :simple="true"
                    />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('common.btn.cancel') }}</el-button>
                <el-button type="primary" @click="saveRelateTable">{{ $t('common.btn.confirm') }}</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="copyVisible"
            title="复制之前"
            width="45%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="copyForm"
                :model="copyForm"
                label-width="80px"
                label-position="left"
                class="pd-20px"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年级:" prop="year">
                            <el-date-picker
                                v-model="copyAllForm.year"
                                value-format="yyyy"
                                type="year"
                                placeholder="选择学年"
                                style="width: 100%"
                                @change="handleChangYearAll"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.trainingLevel') + ':'">
                            <el-select v-model="copyAllForm.trainingLevel" style="width: 100%"
                            clearable @change="handleChangYearAll">
                                <el-option
                                    v-for="item in copyAllOptions.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.trainingCategory') + ':'">
                            <el-select
                                v-model="copyAllForm.trainingCategory"
                                style="width: 100%"
                                clearable @change="handleChangYearAll"
                                multiple collapse-tags>
                                <el-option
                                    v-for="item in copyAllOptions.trainingCategory"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.degreeType') + ':'">
                            <el-select v-model="copyAllForm.degreeType" style="width: 100%;"
                            clearable @change="handleChangYearAll">
                                <el-option
                                    v-for="item in copyAllOptions.degreeType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('culture.scheme.formLearning') + ':'">
                            <el-select
                                v-model="copyAllForm.formLearning"
                                style="width: 100%"
                                clearable @change="handleInitScheme">
                                <el-option
                                    v-for="item in copyAllOptions.formLearning"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="培养方案:" prop="schemeId">
                            <el-select
                                v-model="copyAllForm.schemeId"
                                style="width: 100%"
                                @change="handleChangScheme"
                            >
                                <el-option
                                    v-for="item in copyAllOptions.schemes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="章节:" prop="chapterId">
                            <el-select
                                v-model="copyForm.chapterId"
                                style="width: 100%"
                                @change="handleChangChapter"
                            >
                                <el-option
                                    v-for="item in copyOptions.chapters"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer">
                <div>
                    <el-button @click="copyVisible = false">{{ $t('message.cancel') }}</el-button>
                    <el-button
                        type="primary"
                        @click="handleSubmitCopy()"
                    >{{ $t('message.confirm') }}</el-button>
                </div>
            </span>
        </el-dialog>
        <sechemeCheck
            v-if="dataType === 2"
            :show="checkVisible"
            :id="id"
            :random-id="randomId"
            type="11"
        />
    </div>
</template>

<script>
import * as API from "common/src/api/culture/cultruescheme";
import UTILS from "common/src/utils/utils";
import { queryDic, findTrainingLevelByProjId, sortTrainingCategories } from "common/src/api/dictionary";
import courseCategoryFormForGraduate from "common/src/views/culture/culturetemplate/graduate/courseCategoryForm";
import Tinymce from "common/src/components/tinymce";
import courseFormForGraduate from "common/src/views/culture/culturetemplate/graduate/courseForm";
import sechemeCheck from "../schemeCheck";
import Bus from "common/src/utils/bus";

export default {
    name: "scheme-chapter",
    components: {
        Tinymce,
        courseCategoryFormForGraduate,
        courseFormForGraduate,
        sechemeCheck
    },
    props: {
        type: {
            type: Boolean,
            default: false
        },
        next: {
            type: Function,
            default: null
        },
        dataType: {
            type: String,
            default: "1" // 1为模板，2为方案
        },
        templateId: {
            type: String,
            default: null // 当前模板Id
        },
        projId: {
            type: String,
            default: "1" // 当前模板Id
        },
        inChange: {
            type: Boolean,
            default: false
        },
        isRead: {
            type: Boolean,
            default: false
        },
        templateIdOrigin: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            focusIndex: 0,
            id: "",
            dialogVisible: false,
            topNavItems: [
                {
                    label: this.$t("culture.scheme.inputChaptersCn"),
                    index: 0,
                    active: true
                },
                {
                    label: this.$t("culture.scheme.inputChaptersEn"),
                    index: 1,
                    active: false
                }
            ],
            chapters: [],
            chapterIds: [],
            chapter: {
                type: this.dataType,
                cultureId: "",
                templateId: "",
                detailLanguage: "cn",
                cultureSchemeDetailList: []
            },
            relateTableForm: {
                id: "",
                contentBefore: "",
                contentBeforeEn: "",
                table: 1,
                contentAfter: "",
                contentAfterEn: ""
            },
            content: "",
            copyVisible: false,
            copyAllVisible:false,
            copyForm: {
                year: "",
                schemeId: "",
                chapterId: ""
            },
            copyAllForm: {
                year: "",
                schemeId: "",
                categoryId: "",
                trainingLevel: "",
                trainingCategory: [],
                degreeType: "",
                formLearning: "",
                chapterId: ""
            },
            copyAllOptions: {
                schemes: [],
                categorys: [],
                trainingLevel: [],
                trainingCategory: [],
                degreeType: [],
                formLearning: [],
                chapters: []
            },
            copyOptions: {
                schemes: [],
                chapters: []
            },
            selectChapter: "",
            copyChapter: "",
            currentSchemeId: "",
            checkVisible: false,
            randomId: "",
            interval: null,
            intervalList: [],
            cultureSchemeAllList:[],
            relateTableFormId:"",
        };
    },
    created() {
        this.randomId = "dialogEvent" + new Date().getTime();
        if (this.dataType === 2) {
            this.id = this.$route.params.id;
        } else {
            this.id = this.templateId;
        }
        this.init();
        this.initCopyOptions();
        this.initTrainingLevelOptions(this.projId);
        // API.getIsGraduate(this.id, this.dataType).then(res => {
        //   if (res && res.code === 200) {
        //     this.isGraduate = res.data === '1'
        //   }
        // })

        // 接受选择课程的信息
        Bus.$on(this.randomId, state => {
            this.checkVisible = state;
        });
    },
    destroyed() {
        clearInterval(this.interval);
    },
    methods: {
        autoSave(on) {
            if (on) {
                this.intervalList.push(1);
            } else {
                this.intervalList.pop();
            }
            if (!this.interval) {
                this.interval = setInterval(() => {
                    this.submit();
                }, 30000);
            } else {
                if (0 >= this.intervalList.length) {
                    clearInterval(this.interval);
                }
            }
        },
        init() {
            const obj = this.type
                ? {
                      type: 1
                  }
                : {};
            API.getSchemeChapters(
                Object.assign(
                    {
                        templateId: this.templateId,
                        cultureId:
                            this.dataType === 2 ? this.$route.params.id : ""
                    },
                    obj
                )
            ).then(res => {
                if (res && res.code === 200) {
                    // this.chapters = res.data
                    this.chapter.cultureSchemeDetailList = res.data;
                    _.forEach(this.chapter.cultureSchemeDetailList, function(
                        item,
                        key
                    ) {
                        if (!item.content) {
                            Vue.set(item, "content", "");
                        }
                        if (3 == item.contentType) {
                            item.isOldContent = true;
                        }
                        Vue.set(item, "status", false);
                        item.name =
                            UTILS.numberToChinese(key + 1) + "、" + item.name;
                        item.nameEn = key + 1 + "." + item.nameEn;
                    });
                }
            });
        },
        initCopyOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "K_XXXS",
                    "X_PYLB",
                    "X_XWLX"
                ]
            };
            queryDic(data)
                .then(res => {
                    if (res.code === 200) {
                        // this.fillSelect(res.data);
                        UTILS.fillSelect(
                            {
                                formLearning: "K_XXXS",
                                degreeType: "X_XWLX",
                                // trainingCategory: "X_PYLB"
                            },
                            res.data,
                            this.copyAllOptions
                        );
                        let params = {
                            lang: this.$store.getters.language,
                            keys: ["X_PYLB"]
                        };
                        sortTrainingCategories(params).then((res) => {
                            this.copyAllOptions.trainingCategory = res.data.X_PYLB;
                        });
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        initTrainingLevelOptions(projId) {
            findTrainingLevelByProjId(projId).then(res => {
                if (res.code === 200) {
                    this.copyAllForm.trainingLevel = "";
                    this.loadTrainingLevelOptions("trainingLevel", res.data);
                }
            });
        },
        loadTrainingLevelOptions(optionKey, dataObj) {
            this.copyAllOptions[optionKey] = [];
            _.each(dataObj, level => {
                this.copyAllOptions[optionKey].push({
                    label:
                        "en" === this.$store.getters.language
                            ? level.nameEN
                            : level.nameCN,
                    value: level.code
                });
            });
        },
        clickItem(item) {
            this.topNavItems.forEach(nav => {
                Vue.set(nav, "active", false);
            });
            Vue.set(item, "active", true);
            this.focusIndex = item.index;
        },
        submitCheck() {
            API.checkCultScheDetail({
                cultureId: this.id
            }).then(res => {
                if (res && res.code === 200) {
                    this.checkVisible = true;
                }
            });
        },
        submit(callback) {
            this.chapter.templateId = this.templateId;
            if (this.dataType === 2) {
                this.chapter.cultureId = this.$route.params.id;
            }
            API.updateSchemeChapters(this.chapter).then(res => {
                if (res && res.code === 200) {
                    this.$notify.success({
                        title: "成功",
                        message: "章节保存成功！"
                    });
                    if (_.isFunction(callback)) {
                        callback();
                    }
                    if(callback == 'table'){
                        this.resetObj()
                    }
                }
                this.chapter.editType = "";
            });
        },
        relateTable(item) {
            if (_.indexOf(this.chapterIds, item.id) === -1) {
                this.chapterIds.push(item.id);
            }

            this.chapter.cultureId = this.$route.params.id;
            const param = {
                chapterId: item.id,
                schemeId:
                    this.dataType === 2
                        ? this.chapter.cultureId
                        : this.templateId,
                table: 1,
                type: this.dataType
            };
            API.getTableId(param).then(res => {
                if (res && res.code === 200) {
                    this.relateTableForm = res.data;
                }
                this.relateTableFormId = item.id
                this.dialogVisible = true;
            });
        },
        saveRelateTable() {
             console.log(this.relateTableForm)
            const that = this;
            if (this.chapterIds.length === 0) return;
            // _.forEach(this.chapterIds, function(val) {
            //     console.log('val')
            //     console.log(val)
            //     const item = _.findIndex(that.chapter.cultureSchemeDetailList, {
            //         id: val
            //     });
            //     console.log('item')
            //      console.log(item)
            //     if (!that.chapter.cultureSchemeDetailList[item].contentId) {
            //         console.log('that.relateTableForm.id')
            //         console.log(that.relateTableForm.id)
            //         that.chapter.cultureSchemeDetailList[item].contentId =
            //             that.relateTableForm.id;
            //     }
            //     debugger;
            //     that.chapter.cultureSchemeDetailList[
            //         item
            //     ].detailTable = _.clone(that.relateTableForm);
            //      console.log('that.chapter.cultureSchemeDetailLis')
            //      console.log(that.chapter.cultureSchemeDetailList[
            //         item
            //     ].detailTable)
            // });
            that.chapter.cultureSchemeDetailList.forEach(d =>{
                if(d.id == that.relateTableFormId){
                    d.detailTable = that.relateTableForm
                    if(!d.contentId){
                        d.contentId = that.relateTableForm.id
                    }
                }
            })
            // _.forEach(that.relateTableForm, (val, key) => {
            //     that.relateTableForm[key] = "";
            // });
            console.log(this.relateTableForm)
            let callback = 'table';
            this.submit(callback);
            this.dialogVisible = false;
            this.resetObj();
        },
        resetObj() {
            this.relateTableForm = {
                id: "",
                contentBefore: "",
                contentBeforeEn: "",
                table: 1,
                contentAfter: "",
                contentAfterEn: ""
            };
            this.relateTableFormId = "";
        },
        handleEditChapter(item) {
            Vue.set(item, "status", true);
            this.autoSave(true);
        },
        handleSaveChapter(item) {
            this.autoSave(false);
            this.submit(function() {
                Vue.set(item, "status", false);
            });
        },
        handleCopyChapter(item) {
            this.copyVisible = true;
            this.selectChapter = item;
        },
        handleChangYearAll() {
            if (!this.copyAllForm.year) {
                return;
            }
            const that = this;
            const param = {
                id: this.$route.params.id,
                grade: this.copyAllForm.year,
                trainingLevel: this.copyAllForm.trainingLevel,
                trainingCategory: this.copyAllForm.trainingCategory,
                degreeType: this.copyAllForm.degreeType,
                formLearning: this.copyAllForm.formLearning
            };
            that.copyAllOptions.schemes = [];
            that.copyAllOptions.chapters = [];
            that.copyOptions.schemes = [];
            that.copyOptions.chapters = [];
            that.copyAllForm.schemeId = "";
            that.copyAllForm.chapterId = "";
            API.findCultureSchemeListByYear(param).then(res => {
                if (res && res.code === 200) {
                    _.forEach(res.data, item => {
                        that.copyAllOptions.schemes.push({
                            label: item.name + '(' + item.major + ')',
                            value: item.id
                        });
                    });
                }
            });
        },
        handleChangAllScheme(val) {
            const that = this;
            const param = {
                cultureId: val,
            };
            that.copyAllForm.chapterId = "";
             API.getSchemeChapters(param).then(res => {
                if (res && res.code === 200) {
                    this.cultureSchemeAllList = res.data
                    // _.forEach(res.data, item => {
                    //     that.copyAllOptions.chapters.push({
                    //         label: item.name,
                    //         value: item.id
                    //     });
                    // });
                }
            });
        },
        handleChangYear(val) {
            if (!val) {
                return;
            }
            const that = this;
            const param = {
                id: this.$route.params.id,
                grade: this.copyForm.year
            };
            that.copyOptions.schemes = [];
            that.copyOptions.chapters = [];
            that.copyAllOptions.schemes = [];
            that.copyAllOptions.chapters = [];
            that.copyForm.schemeId = "";
            that.copyForm.chapterId = "";
            API.findCultureSchemeListByYear(param).then(res => {
                if (res && res.code === 200) {
                    _.forEach(res.data, item => {
                        that.copyOptions.schemes.push({
                            label: item.name,
                            value: item.id
                        });
                    });
                }
            });
        },
        handleChangScheme(val) {
            const that = this;
            const param = {
                schemeId: val,
                chapterId: ""
            };
            this.currentSchemeId = val;
            this.copyOptions.chapters.length = 0;
            that.copyForm.chapterId = "";
            API.findCultureScheDetailList(param).then(res => {
                if (res && res.code === 200) {
                    _.forEach(res.data, item => {
                        that.copyOptions.chapters.push({
                            label: item.name,
                            value: item.id
                        });
                    });
                }
            });
        },
        handleChangChapter(val) {
            const param = {
                schemeId: this.currentSchemeId,
                chapterId: val
            };
            API.findCultureScheDetailList(param).then(res => {
                if (res && res.code === 200) {
                    this.copyChapter = res.data[0];
                }
            });
        },
        handleSubmitCopy() {
            const index = _.findIndex(
                this.chapter.cultureSchemeDetailList,
                this.selectChapter
            );
            if (this.copyChapter) {
                Vue.set(
                    this.chapter.cultureSchemeDetailList[index],
                    "content",
                    this.copyChapter.content
                );
                Vue.set(
                    this.chapter.cultureSchemeDetailList[index],
                    "contentEn",
                    this.copyChapter.contentEn
                );
            }
            this.copyVisible = false;
            this.submit();
        },
        handleSubmitAllCopy(){
            if(this.cultureSchemeAllList && this.cultureSchemeAllList.length > 0){
                console.log(this.cultureSchemeAllList)
                console.log(this.chapter.cultureSchemeDetailList)
                let cultureSchemeDetailList = this.chapter.cultureSchemeDetailList;
                let chapter = {};
                if(this.cultureSchemeAllList.length == cultureSchemeDetailList.length){
                    chapter.cultureSchemeDetailList = []
                    chapter.cultureSchemeDetailList = this.cultureSchemeAllList;
                    _.forEach(chapter.cultureSchemeDetailList, function(
                        item,
                        key
                    ){
                        if (!item.content) {
                            Vue.set(item, "content", "");
                        }
                        if (3 == item.contentType) {
                            item.isOldContent = true;
                        }
                        Vue.set(item, "status", false);
                        item.name =
                            UTILS.numberToChinese(key + 1) + "、" + item.name;
                        item.nameEn = key + 1 + "." + item.nameEn;
                    });
                }else{
                    this.$message({
                        message: "该培养方案与要复制的培养方案有差别，无法复制；请通过各章节后复制之前按钮实现操作",
                        type: "warning"
                    });
                return
                }
                this.copyAllVisible = false;
                chapter.editType = 1
                chapter.templateId = this.templateId;
                chapter.type = this.dataType;
                if (this.dataType === 2) {
                    chapter.cultureId = this.$route.params.id;
                }
                API.updateSchemeChapters(chapter).then(res => {
                    if (res && res.code === 200) {
                        this.$notify.success({
                            title: "成功",
                            message: "章节保存成功！"
                        });
                        //this.chapter.cultureSchemeDetailList = this.cultureSchemeAllList
                        this.init();
                    }
                    this.chapter.editType = "";
                });
            }

        },
        // 上一步
        backStep() {
            if (this.next) {
                this.next(-1);
            }
        },
        // 预览模板
        preview() {
            let schemeDetails =  {
                    projId: this.projId,
                    id: this.id,
                    templateId: this.templateId,
                    dataType: this.dataType,
                    isRead: this.isRead,
                    templateIdOrigin: this.templateIdOrigin,
                    nameCN:"",
                    nameEN:""
            }
            sessionStorage.setItem("schemeDetails",JSON.stringify(schemeDetails));
            let routerName = "cultureTemplateView";
            if (2 === parseInt(this.dataType)) {
                routerName = "cultureSchemePreview";
            }
            this.$router.push({
                name: routerName,
                params: {
                    projId: this.projId,
                    id: this.id,
                    templateId: this.templateId,
                    dataType: this.dataType,
                    isRead: this.isRead,
                    templateIdOrigin: this.templateIdOrigin
                }
            });
        },
        // 下一步
        nextStep() {
            this.submit(() => {
                if (this.next) {
                    this.next();
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.edu-page-title {
    margin-bottom: 20px;
    span {
        cursor: pointer;
        display: inline-block;
        padding-right: 10px;
    }
    span.active {
        color: #2876c2;
    }
}

.conent-style {
    padding: 24px;
    border: 1px solid #dadcde;
}

.border-right {
    margin-right: 10px;
}
</style>
